<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<title>jquery验证码插件verify.js|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="css/verify.css">

	<!-- Common plugins -->
	<link href="../static/css/bootstrap.min.css" rel="stylesheet">
	<link href="../static/css/simple-line-icons.css" rel="stylesheet">
	<link href="../static/css/font-awesome.min.css" rel="stylesheet">
	<link href="../static/css/pace.css" rel="stylesheet">
	<link href="../static/css/jasny-bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/css/nanoscroller.css">
	<link rel="stylesheet" href="../static/css/metismenu.min.css">
	<!--for checkbox-->
	<link href="../static/css/blue.css" rel="stylesheet">
	<!--template css-->
	<link href="../static/css/style.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="../static/js/html5shiv.min.js"></script>
	<script src="../static/js/respond.min.js"></script>
	<![endif]-->
	<style type="text/css">
		html, body {
			height: 100%;
		}
	</style>
</head>
<body >
<!--	<div class="htmleaf-container">-->
<!--		<div class="container">-->
<!--			<div class="row">-->
<!--				<div class="col-md-offset-4 col-md-4">-->
<!--					<h3>普通验证码</h3>-->
<!--					<div id="mpanel2" ></div>-->
<!--					<button type="button" id="check-btn" class="verify-btn">确定</button>-->
<!--				</div>-->
<!--			</div>-->
<!--			<hr>-->
<!--			<div class="row">-->
<!--				<div class="col-md-offset-4 col-md-4">-->
<!--					<h3>数字计算验证码</h3>-->
<!--					<div id="mpanel3" style="margin-top: 20px"></div>-->
<!--					<button type="button" id="check-btn2" class="verify-btn">确定</button>-->
<!--				</div>-->
<!--			</div>-->
<!--			<hr>-->
<!--			<div class="row">-->
<!--				<div class="col-md-offset-4 col-md-4">-->
<!--					<h3>滑动验证码</h3>-->
<!--					<p>滑动滑块到最右侧完成验证</p>-->
<!--					<div id="mpanel1" ></div>-->
<!--					<p style="margin-top:50px;">拖动方块到空白处完成验证</p>-->
<!--					<div id="mpanel4" ></div>-->
<!--				</div>-->
<!--			</div>-->
<!--			<hr>-->
			<div class="row"   >
				<div class="col-md-offset-4 col-md-4">
<!--					<h3>点选验证码</h3>-->
<!--					<div id="mpanel5" style="margin-top:50px;"></div>-->
					<div id="mpanel6"   style="z-index: 999999;display: none ;margin-left: -10%;margin-top:62%;position:absolute;top: 50%"></div>
				</div>
			</div>
		<%--</div>
	</div>
	--%>
<div class="misc-wrapper">
	<div class="misc-content">
		<div class="container">
			<div class="row">
				<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
					<div class="misc-header text-center">
						<img src="../static/css/logo.png" alt="logo" style="width: 100px;height:100px">
					</div>
					<div class="misc-box">
						<p class="text-center text-uppercase pad-v" style="font-size: 20px">Login</p>

						<div class="form-group">
							<label class="text-muted" for="phoneNumber">手机号</label>
							<div class="group-icon">
								<input id="phoneNumber" type="text" placeholder="请输入手机号" class="form-control"
									   required="">
								<span class="icon-user text-muted icon-input"></span>
							</div>
						</div>
						<div class="form-group">
							<label class="text-muted" for="password">密码</label>
							<div class="group-icon">
								<input id="password" type="password" placeholder="请输入密码" class="form-control">
								<span class="icon-lock text-muted icon-input"></span>
							</div>
						</div>
						<div class="clearfix">
							<div class="pull-left">
								<div class="checkbox">
									<label>
										<input type="checkbox" class="i-checks" name="remember">
										<span>记住密码</span></label>
								</div>
							</div>
							<div class="pull-right">
								<button type="submit" onclick="login()" class="btn btn-block btn-primary">登录</button>
							</div>
						</div>
						<hr>
						<p class=" text-center">需要注册？</p>
						<a href="WEB-INF/menu/page-register.html" class="btn btn-block btn-default">前往注册</a>

					</div>
					<div class="text-center misc-footer">
						<span>&copy; Copyright 2016 - 2017. Float Admin<br>Bootstrap admin template</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jasny-bootstrap.min.js"></script>
<script src="../static/js/jquery.slimscroll.min.js"></script>
<script src="../static/js/jquery.nanoscroller.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/verify.js" ></script>
<!--ichecks-->
<script src="../static/js/icheck.min.js"></script>

	<script type="text/javascript">

	// 	$('#mpanel2').codeVerify({
	// 		type : 1,
	// 		width : '400px',
	// 		height : '50px',
	// 		fontSize : '30px',
	// 		codeLength : 6,
	// 		btnId : 'check-btn',
	// 		ready : function() {
	// 		},
	// 		success : function() {
	// 			alert('验证匹配！');
	// 		},
	// 		error : function() {
	// 			alert('验证码不匹配！');
	// 		}
	// 	});
	//
	//
	// 	$('#mpanel3').codeVerify({
	// 		type : 2,
	// 		figure : 100,	//位数，仅在type=2时生效
	// 		arith : 0,	//算法，支持加减乘，不填为随机，仅在type=2时生效
	// 		width : '200px',
	// 		height : '50px',
	// 		fontSize : '30px',
	// 		btnId : 'check-btn2',
	// 		ready : function() {
	// 		},
	// 		success : function() {
	// 			alert('验证匹配！');
	// 		},
	// 		error : function() {
	// 			alert('验证码不匹配！');
	// 		}
	// 	});
	//
	//
	//
	// 	$('#mpanel1').slideVerify({
	// 		type : 1,		//类型
	// 		vOffset : 5,	//误差量，根据需求自行调整
	// 		barSize : {
	// 			width : '80%',
	// 			height : '40px',
	// 		},
	// 		ready : function() {
	// 		},
	// 		success : function() {
	// 			alert('验证成功，添加你自己的代码！');
	// 			//......后续操作
	// 		},
	// 		error : function() {
	// //		        	alert('验证失败！');
	// 		}
	//
	// 	});
	//
	//
	// 	$('#mpanel4').slideVerify({
	// 		type : 2,		//类型
	// 		vOffset : 5,	//误差量，根据需求自行调整
	// 		vSpace : 5,	//间隔
	// 		imgName : ['1.jpg', '2.jpg'],
	// 		imgSize : {
	// 			width: '400px',
	// 			height: '200px',
	// 		},
	// 		blockSize : {
	// 			width: '40px',
	// 			height: '40px',
	// 		},
	// 		barSize : {
	// 			width : '400px',
	// 			height : '40px',
	// 		},
	// 		ready : function() {
	// 		},
	// 		success : function() {
	// 			alert('验证成功，添加你自己的代码！');
	// 			//......后续操作
	// 		},
	// 		error : function() {
	// //		        	alert('验证失败！');
	// 		}
	//
	// 	});
		
		
		
	// 	$('#mpanel5').pointsVerify({
	// 		defaultNum : 4,	//默认的文字数量
	// 		checkNum : 2,	//校对的文字数量
	// 		vSpace : 5,	//间隔
	// 		imgName : ['1.jpg', '2.jpg'],
	// 		imgSize : {
	// 			width: '600px',
	// 			height: '200px',
	// 		},
	// 		barSize : {
	// 			width : '600px',
	// 			height : '40px',
	// 		},
	// 		ready : function() {
	// 		},
	// 		success : function() {
	// 			alert('验证成功，添加你自己的代码！');
	// 			//......后续操作
	// 		},
	// 		error : function() {
	// //		        	alert('验证失败！');
	// 		}
	//
	// 	});

	$(document).ready(function () {
		$('.i-checks').iCheck({
			checkboxClass: 'icheckbox_square-blue',
			radioClass: 'iradio_square-blue'
		});
	});

	function login() {
		var name = $("#phoneNumber").val();
		var pass = $("#password").val();
		let data = {"phoneNumber": name, "password": pass};
		if (name === "" || pass === "") {
			alert("账号密码不可为空")
			return false;
		}
		$("#mpanel6").css("display", "block");
		$('#mpanel6').pointsVerify({
			defaultNum : 4,	//默认的文字数量
			checkNum : 2,	//校对的文字数量
			vSpace : 5,	//间隔
			imgName : ['1.jpg', '2.jpg'],
			imgSize : {
				width: '600px',
				height: '200px',
			},
			barSize : {
				width : '600px',
				height : '40px',
			},
			ready : function() {
			},
			success : function() {
				alert('验证成功！');
				$("#mpanel6").css("display", "none");
				$("#mpanel6").empty()
				$.ajax({
					url: "login",
					data: JSON.stringify(data),
					type: "post",
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					success: function (res) {
						if (res.code === 200) {
							window.location.href = 'http://localhost/toForestDecorateHome'
						} else {
							alert(res.msg)
						}
					}, error: function () {
						alert("出错了")
					}
				})
				//......后续操作
			},
			error : function() {
				$("#mpanel6").css("display", "none");
				$("#mpanel6").empty()

				//		        	alert('验证失败！');
			}

		});


	}


		
	</script>
</body>
</html>